<template>
    <div class="indexView">
        <div class="header">
            <div class="headLeft">
                <h2>后台管理系统</h2>
            </div>
            <div class="headRight">
                <el-dropdown trigger="click" @command="headCommand">
                    <span class="el-dropdown-link">
                        <span>张三</span>
                        <el-icon style="margin-left:5px"><ArrowDown /></el-icon>
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="1">个人中心</el-dropdown-item>
                        <el-dropdown-item :command="2">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
               
            </div>
        </div>
        <div class="content" style="position: relative;">
            <div class="aside" style="width: 230px;position:absolute;left:0;">
                <el-menu text-color="#ff0000" router active-text-color="#ffffff" background-color="#545c64" default-active="/home" class="el-menu-vertical-demo">
                    <el-menu-item index="/home">
                        <el-icon><User /></el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/user">
                        <el-icon><Operation /></el-icon>
                        <span>用户列表</span>
                    </el-menu-item>
                    <el-menu-item index="/article">
                        <el-icon><Operation /></el-icon>
                        <span>文章列表</span>
                    </el-menu-item>
                    <el-menu-item index="/book">
                        <el-icon><Operation /></el-icon>
                        <span>书籍列表</span>
                    </el-menu-item>
                    <el-menu-item index="/star">
                        <el-icon><Operation /></el-icon>
                        <span>明星列表</span>
                    </el-menu-item>
                    <el-menu-item index="/video">
                        <el-icon><Operation /></el-icon>
                        <span>视频列表</span>
                    </el-menu-item>
                    <el-menu-item index="/jietu">
                        <el-icon><Operation /></el-icon>
                        <span>截图</span>
                    </el-menu-item>
                    <el-menu-item index="/waterfall">
                        <el-icon><Operation /></el-icon>
                        <span>瀑布流</span>
                    </el-menu-item>
                    <el-menu-item index="/upload">
                        <el-icon><Operation /></el-icon>
                        <span>文件上传</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="main" style="position: relative;">
                <div style="position:absolute;left:230px;overflow:hidden;">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
onMounted(() => {
    if (sessionStorage.getItem("token") == null) {
        router.push('/login')
    }
})
const headCommand=(e)=>{
    if(e==1){
        router.push('/user')
    }else{
        sessionStorage.removeItem("token")
        sessionStorage.removeItem("username")
        router.push('/login')
    }
}
</script>
<style lang="scss">
.indexView {
    .header {
        width: 100%;
        height: 60px;
        background: #f0f0f0;
        display:flex;
        align-items:center;
        justify-content: space-between;
        .headLeft{
            margin-left:20px;
        }
        .headRight{
            margin-right:40px;
            display:flex;
            align-items:center;
        }
    }

    .content {
        display:flex;
        .aside {
            height: calc(100vh - 60px);
            background:#545c64;
        }
        .main{
            padding:10px;
        }
    }
}</style>
   